<div class="todos">
    <a href="#/add" class="todo-add"><i class="fa fa-plus-square"></i></a>
    <ul class="filter-category">
        <li
            san-for="item in categories"
            style="background: {{item.color}}"
            class="{{item.id == route.query.category ? 'checked' : ''}}"
        >
            <router-link to="/todos/category/{{ item.id }}">{{ item.title }}</router-link>
        </li>
    </ul>

    <router-link to="/" class="fa fa-close filter-category-clear" san-if="route.query.category"></router-link>

    <ul class="todo-list">
        <li san-for="item, index in todos"
            style="border-color: {{item.category.color}}"
            class="{{item.done ? 'todo-done' : ''}}"cl
        >
            <h3>{{ item.title }}</h3>
            <p>{{ item.desc }}</p>
            <div class="todo-meta">
                <span san-if="item.category">{{ item.category.title }} | </span>
                <span>预期完成时间: {{ item.endTime | formatDate('YYYY-MM-DD, h:mm a') }}</span>
            </div>
            <router-link class="fa fa-pencil" to="/edit/{{ item.id }}"></router-link>
            <i class="fa fa-check" on-click="doneTodo(index)"></i>
            <i class="fa fa-trash-o" on-click="rmTodo(index)"></i>
        </li>
    </ul>
</div>

